<template>
  <div class="status-box">
    <div v-for="(item, idx) in statusList" :key="idx">
      <span :class="['icon', item.status]">{{ item.status === 'ok' ? '✓' : '✗' }}</span>
      {{ item.name }}
      <button v-if="item.status === 'error'" @click="fixProtocol(item)">
        修复
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { invoke } from '@tauri-apps/api'

interface ProtocolStatus {
  name: string
  status: 'ok' | 'error'
}

const statusList = ref<ProtocolStatus[]>([])

const checkProtocol = async () => {
  statusList.value = await invoke('check_protocol_status')
}

const fixProtocol = async (item: ProtocolStatus) => {
  await invoke('fix_protocol', { name: item.name })
  await checkProtocol()
}
</script>